<template>
  <div class="childrensday">
    <div class="childrensday-bg">
      <img :src="bg" alt="" width="100%">
    </div>
    <img class="gobtn" :src="investBtn" alt="马上参与" :style="{top: gobtntop1 + 'px', left: gobtnRight + 'px'}" @click="invest">
    <img class="gobtn" :src="investBtn" alt="马上参与" :style="{top: gobtntop2 + 'px', left: gobtnLeft + 'px'}" @click="invest">
    <img class="gobtn" :src="investBtn" alt="马上参与" :style="{top: gobtntop3 + 'px', left: gobtnRight + 'px'}" @click="invest">
    <img class="gobtn" :src="investBtn" alt="马上参与" :style="{top: gobtntop4 + 'px', left: gobtnLeft + 'px'}" @click="invest">
    <img class="gobtn" :src="investBtn" alt="马上参与" :style="{top: gobtntop5 + 'px', left: gobtnRight + 'px'}" @click="invest">

    <div class="childrensday-item" id="sp1" :style="{top: item1top + 'px', left: item1left + 'px'}">
      <img :src="item1" alt="6.1快乐">
      <div class="childrensday-item-right">
        <h3>拔得头筹奖</h3>
        <p>活动期间每个标的首名投资人可获得10元现金奖励，投资金额需>=2000元</p>
        <img :src="investBtn" alt="" @click="invest">
      </div>
    </div>
    <div class="childrensday-item" id="sp2" :style="{top: item2top + 'px', left: item2left + 'px'}">
      <div class="childrensday-item-right">
        <h3>勇冠三军奖</h3>
        <p>活动期间每个标投资额最高的投资人可获得28元现金奖励，金额相同以时间为准</p>
        <img :src="investBtn" alt="" @click="invest">
      </div>
      <img :src="item2" alt="6.1快乐">      
    </div>
    <div class="childrensday-item" id="sp3" :style="{top: item3top + 'px', left: item3left + 'px'}">
      <img :src="item3" alt="6.1快乐">
      <div class="childrensday-item-right">
        <h3>一槌定音将</h3>
        <p>活动期间每个标的最后一个投资的用户可获得10元现金奖励</p>
        <img :src="investBtn" alt="" @click="invest">
      </div>
    </div>

    <div class="childrensday-info" :style="{top: infotop + 'px', left: infoleft + 'px'}">
      <p>1、活动时间：2017年5月16日-2017年6月3日；</p>
      <p>2、活动限投资2个月及以上标的，活动期间投资满足活动条件用户即可参与活动；</p>
      <p>3、满额兑奖活动一种奖品可获得多次，但不可领取多种奖品，默认赠送投资范围内价值最高的奖品；</p>
      <p>4、本次活动奖品可进行折现，折现金额按实际购买金额的70%折现到您分秒金融账户，如需折现请联系客服人员；</p>
      <p>5、中奖用户需最晚在活动结束3个工作日内，通过扫描活动下方二维码关注分秒金融微信公众号“分秒金融服务号”或“分秒先生”，留下您的注册账号、收件人、地址、手机号，由工作人员核对无误后发放奖品，因用户未留或错留个人信息的用户视为自动放弃奖励；</p>
      <p>6、实物奖励将在活动结束后10个工作日内，由客服统一联系中奖用户并寄出，奖品颜色不可挑选，随机发放；</p>
      <p>7、活动二：“6.1大乐透，抢标赢现金”，奖金于满标结束后3个工作日内发放到用户分秒金融账户；</p>
      <p>8、迪士尼门票默认购买标准票，到访日期根据迪士尼官网显示余票而定，购票时需核实获奖者身份信息，届时请保持手机畅通，如有其他需要及疑问请拨打客服电话400-608-2001咨询。</p>
      <p>9、本活动最终解释权归分秒金融所有。</p>
    </div>

    <div class="childrensday-btn" :style="{top: btntop + 'px'}">
      <img :src="btn" alt="立即抢投" @click="invest">
    </div>

    <div class="childrensday-btn2" :style="{top: footertop + 'px'}">
      <img :src="footer" alt="市场有风险 投资需谨慎">
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        bg: require('./bg.png'),
        w: 0,
        h: 0,
        investBtn: require('./gobtn.png'),
        item1: require('./item1.png'),
        item2: require('./item2.png'),
        item3: require('./item3.png'),
        btn: require('./btn.png'),
        footer: require('./footerinfo.png')
      }
    },
    computed: {
      btnHeight () {
        return (100 / 4616) * this.h
      },
      navsHeight () {
        return (460 / 4616) * this.h
      },
      gobtnRight () {
        return (440 / 750) * this.w
      },
      gobtnLeft () {
        return (170 / 750) * this.w
      },
      gobtntop1 () {
        return (770 / 4616) * this.h
      },
      gobtntop2 () {
        return (1089 / 4616) * this.h
      },
      gobtntop3 () {
        return (1423 / 4616) * this.h
      },
      gobtntop4 () {
        return (1746 / 4616) * this.h
      },
      gobtntop5 () {
        return (2063 / 4616) * this.h
      },
      item1top () {
        return (2621 / 4616) * this.h
      },
      item1left () {
        return (67 / 750) * this.w
      },
      item2top () {
        return (2850 / 4616) * this.h
      },
      item2left () {
        return (19 / 750) * this.w
      },
      item3top () {
        return (3083 / 4616) * this.h
      },
      item3left () {
        return (67 / 750) * this.w
      },
      infotop () {
        return (3539 / 4616) * this.h
      },
      infoleft () {
        return (20 / 750) * this.w
      },
      btntop () {
        return (4340 / 4616) * this.h
      },
      footertop () {
        return (4554 / 4616) * this.h
      }
    },
    created () {
      this.w = document.documentElement.clientWidth
      this.h = this.w * (4616 / 750)
    },
    methods: {
      invest () {
        this.$router.push('/invest')
      }
    }
  }
</script>

<style lang='scss' scoped>
  .childrensday {
    position: relative;
    left: 0;
    top: 0;
    font-size: 0;
    &-bg {
      width: 100%;
      height: 100%;
    }
    .gobtn {
      position: absolute;
      width: 146px;
      height: 41px;
    }
    &-item {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 668px;
      height: 210px;
      border: 1px solid #019893;
      background: #fff;
      &-right {
        width: 420px;
        padding: 0 30px;
        h3 {
          font-size: 28px;
          color: #004c61;
          margin-bottom: 12px;
        }
        p {
          font-size: 22px;
          color: #025f79;
          margin-bottom: 12px;
          line-height: 36px;
        }
        img {
          width: 124px;
          height: 36px;
        }
      }
    }
      #sp1 {
        &>img {
          width: 122px;
          height: 165px;
          margin-left: 36px;
        }
      }
      #sp2 {
        text-align: right;
        &>img {
          width: 148px;
          height: 176px;
          margin-right: 56px;
        }
      }
      #sp3 {
        &>img {
          width: 105px;
          height: 179px;
          margin-left: 64px;
        }
      }
      &-info {
        box-sizing: border-box;
        position: absolute;
        width: 716px;
        padding: 0 30px;
        font-size: 24px;
        color: #004c61;
        line-height: 32px;
      }
      &-btn {
        position: absolute;
        width: 100%;
        text-align: center;
        img {
          width: 392px;
          height: 161px;
        }
      }
      &-btn2 {
        position: absolute;
        width: 100%;
        text-align: center;
        img {
          width: 198px;
          height: 18px;
        }
      }
  }
</style>
